<template>
  <div class="internship-container">
    <el-card shadow="never">
      <!-- 搜索栏 -->
      <div class="filter-header">
        <el-input 
          v-model="filter.id" 
          placeholder="编号"
          style="width: 120px"
          class="filter-item"
        />
        <el-input 
          v-model="filter.name" 
          placeholder="名称"
          style="width: 120px; margin-left: 10px"
          class="filter-item"
        />
        <el-input 
          v-model="filter.company" 
          placeholder="实习单位"
          style="width: 140px; margin-left: 10px"
          class="filter-item"
        />
        <el-button type="primary" style="margin-left: 15px" @click="search">搜索</el-button>
        <el-button style="margin-left: 10px" @click="resetFilter">重置</el-button>
      </div>
 
      <!-- 操作按钮 -->
      <div class="action-buttons">
        <el-button type="text" :icon="CirclePlus" @click="showPublishDialog">发布</el-button>
      </div>
 
      <!-- 数据表格 -->
      <el-table 
        :data="tableData"
        style="width: 100%"
        header-row-class-name="table-header"
        v-loading="loading"
      >
        <el-table-column type="selection" width="45" align="center"/>
        <el-table-column prop="id" label="编号" width="80"/>
        <el-table-column prop="name" label="名称" width="120"/>
        <el-table-column prop="requirement" label="申请要求" width="120"/>
        <el-table-column prop="start_time" label="开始时间" width="120"/>
        <el-table-column prop="end_time" label="结束时间" width="120"/>
        <el-table-column prop="deadline" label="申请截至时间" width="150"/>
        <el-table-column prop="company" label="单位名称" width="120"/>
        <el-table-column prop="company_info" label="单位简介" width="120" show-overflow-tooltip/>
        <el-table-column prop="weekly_count" label="周报数量" width="100" align="center"/>
        <el-table-column prop="weekly_requirement" label="周报要求" width="150" show-overflow-tooltip>
          <template #default="scope">{{ scope.row.weekly_requirement  }}...</template>
        </el-table-column>
        <el-table-column prop="weekly_percent" label="周报占比(%)" width="120" align="center"/>
        <el-table-column prop="total_percent" label="总括占比(%)" width="120" align="center"/>
        <el-table-column label="操作" width="150" align="center">
          <template #default="scope">
            <el-button type="text" size="small" @click="showEditDialog(scope.row)"> 编辑</el-button>
            <el-button type="text" size="small" style="color: #F56C6C" @click="showDeleteDialog(scope.row)"> 删除</el-button>
          </template>
        </el-table-column>
      </el-table>
 
      <!-- 分页信息 -->
      <div class="footer-section">
        <div class="pagination-info">
          第{{ pagination.start  }}到{{ pagination.end  }}条，共{{ pagination.total  }}条记录。
        </div>
        <div class="loading-text" v-if="loading">
          数据加载中，请稍后。
        </div>
      </div>
    </el-card>
 
    <!-- 编辑对话框 -->
    <el-dialog v-model="dialogVisible.edit"  title="编辑实习信息">
      <div>
        <el-input v-model="currentRow.name"  placeholder="名称"></el-input>
        <el-input v-model="currentRow.requirement"  placeholder="申请要求"></el-input>
        
        <el-date-picker 
          v-model="currentRow.start_time" 
          type="date"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd"
          style="width: 100%; margin: 5px 0"
        ></el-date-picker>
        
        <el-date-picker 
          v-model="currentRow.end_time" 
          type="date"
          placeholder="选择结束时间"
          value-format="yyyy-MM-dd"
          style="width: 100%; margin: 5px 0"
        ></el-date-picker>
        
        <el-date-picker 
          v-model="currentRow.deadline" 
          type="date"
          placeholder="选择申请截止时间"
          value-format="yyyy-MM-dd"
          style="width: 100%; margin: 5px 0"
        ></el-date-picker>
 
        <el-input v-model="currentRow.company"  placeholder="单位名称"></el-input>
        <el-input v-model="currentRow.company_info"  placeholder="单位简介"></el-input>
        <el-input v-model="currentRow.weekly_count"  placeholder="周报数量"></el-input>
        <el-input v-model="currentRow.weekly_requirement"  placeholder="周报要求"></el-input>
        <el-input v-model="currentRow.weekly_percent"  placeholder="周报占比(%)"></el-input>
        <el-input v-model="currentRow.total_percent"  placeholder="总占比(%)"></el-input>
      </div>
      <template #footer>
        <el-button @click="dialogVisible.edit  = false">取消</el-button>
        <el-button type="primary" @click="editItem">确定</el-button>
      </template>
    </el-dialog>
 
    <!-- 删除对话框 -->
    <el-dialog v-model="dialogVisible.delete"  title="删除确认">
      <span>确定要删除此项吗？</span>
      <template #footer>
        <el-button @click="dialogVisible.delete  = false">取消</el-button>
        <el-button type="primary" @click="deleteItem">确定</el-button>
      </template>
    </el-dialog>
 
    <!-- 发布对话框 -->
    <el-dialog v-model="dialogVisible.publish"  title="发布实习信息">
      <div>
        <el-input v-model="newItem.name"  placeholder="名称"></el-input>
        <el-input v-model="newItem.requirement"  placeholder="申请要求"></el-input>
        
        <el-date-picker 
          v-model="newItem.start_time" 
          type="date"
          placeholder="选择开始时间"
          value-format="yyyy-MM-dd"
          style="width: 100%; margin: 5px 0"
        ></el-date-picker>
        
        <el-date-picker 
          v-model="newItem.end_time" 
          type="date"
          placeholder="选择结束时间"
          value-format="yyyy-MM-dd"
          style="width: 100%; margin: 5px 0"
        ></el-date-picker>
        
        <el-date-picker 
          v-model="newItem.deadline" 
          type="date"
          placeholder="选择申请截止时间"
          value-format="yyyy-MM-dd"
          style="width: 100%; margin: 5px 0"
        ></el-date-picker>
 
        <el-input v-model="newItem.company"  placeholder="单位名称"></el-input>
        <el-input v-model="newItem.company_info"  placeholder="单位简介"></el-input>
        <el-input v-model="newItem.weekly_count"  placeholder="周报数量"></el-input>
        <el-input v-model="newItem.weekly_requirement"  placeholder="周报要求"></el-input>
        <el-input v-model="newItem.weekly_percent"  placeholder="周报占比(%)"></el-input>
        <el-input v-model="newItem.total_percent"  placeholder="总占比(%)"></el-input>
      </div>
      <template #footer>
        <el-button @click="dialogVisible.publish  = false">取消</el-button>
        <el-button type="primary" @click="publishItem">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
 
<script setup>
import { ref, reactive, onMounted } from 'vue'
import { CirclePlus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
 
// 状态管理 
const loading = ref(true)
const filter = reactive({
  id: '',
  name: '',
  company: ''
})
const dialogVisible = reactive({
  publish: false,
  edit: false,
  delete: false 
})
const pagination = reactive({
  start: 1,
  end: 0,
  total: 0 
})
 
// 数据 
const originalData = ref([
  {
    id: 4,
    name: '生产实习',
    requirement: '无挂科',
    start_time: '2022-01-02',
    end_time: '2023-02-28',
    deadline: '2023-01-01',
    company: '华为',
    company_info: '无',
    weekly_count: 5,
    weekly_requirement: '周报不少',
    weekly_percent: 40,
    total_percent: 60 
  },
  {
    id: 5,
    name: '生产实习',
    requirement: '333',
    start_time: '2020-01-01',
    end_time: '2020-01-09',
    deadline: '2020-01-16',
    company: '333',
    company_info: '33',
    weekly_count: 3,
    weekly_requirement: '周报不少',
    weekly_percent: 40,
    total_percent: 60 
  }
])
 
const tableData = ref([])
const currentRow = ref({})
const newItem = ref({})
 
// 方法 
const search = () => {
  tableData.value  = originalData.value.filter(item  => {
    const idMatch = filter.id  ? String(item.id).includes(filter.id)  : true 
    const nameMatch = filter.name  ? item.name.toLowerCase().includes(filter.name.toLowerCase())  : true 
    const companyMatch = filter.company  ? item.company.toLowerCase().includes(filter.company.toLowerCase())  : true 
    return idMatch && nameMatch && companyMatch 
  })
  
  pagination.total  = tableData.value.length  
  pagination.start  = 1 
  pagination.end  = tableData.value.length  
}
 
const resetFilter = () => {
  filter.id  = ''
  filter.name  = ''
  filter.company  = ''
  search()
}
 
const showPublishDialog = () => {
  newItem.value  = {
    name: '',
    requirement: '',
    start_time: '',
    end_time: '',
    deadline: '',
    company: '',
    company_info: '',
    weekly_count: '',
    weekly_requirement: '',
    weekly_percent: '',
    total_percent: ''
  }
  dialogVisible.publish  = true 
}
 
const publishItem = () => {
  originalData.value.push({  
    ...newItem.value,  
    id: Date.now(), 
    weekly_count: Number(newItem.value.weekly_count), 
    weekly_percent: Number(newItem.value.weekly_percent), 
    total_percent: Number(newItem.value.total_percent) 
  })
  search()
  dialogVisible.publish  = false 
  ElMessage.success(' 发布成功')
}
 
const showEditDialog = (row) => {
  currentRow.value  = { ...row }
  dialogVisible.edit  = true 
}
 
const editItem = () => {
  const index = originalData.value.findIndex(item  => item.id  === currentRow.value.id) 
  if (index !== -1) {
    originalData.value.splice(index,  1, { 
      ...currentRow.value, 
      weekly_count: Number(currentRow.value.weekly_count), 
      weekly_percent: Number(currentRow.value.weekly_percent), 
      total_percent: Number(currentRow.value.total_percent) 
    })
    search()
    ElMessage.success(' 修改成功')
  }
  dialogVisible.edit  = false 
}
 
const showDeleteDialog = (row) => {
  currentRow.value  = row 
  dialogVisible.delete  = true 
}
 
const deleteItem = async () => {
  try {
    await ElMessageBox.confirm(' 确定要删除此项吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const index = originalData.value.findIndex(item  => item.id  === currentRow.value.id) 
    if (index !== -1) {
      originalData.value.splice(index,  1)
      search()
      ElMessage.success(' 删除成功') 
    }
  } catch {
    // 用户取消删除 
  } finally {
    dialogVisible.delete  = false 
  }
}
 
// 初始化 
onMounted(() => {
  tableData.value  = [...originalData.value] 
  pagination.total  = originalData.value.length  
  pagination.end  = originalData.value.length  
  
  setTimeout(() => {
    loading.value  = false 
  }, 1500)
})
</script>
 
<style scoped>
.internship-container {
  padding: 20px;
}
 
.filter-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
 
.action-buttons {
  margin: 15px 0 20px;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}
 
.table-header th {
  background-color: #f5f7fa !important;
  font-weight: 600;
}
 
.footer-section {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
 
.pagination-info {
  color: #909399;
  font-size: 13px;
}
 
.loading-text {
  color: #606266;
  font-size: 13px;
  font-style: italic;
}
 
.el-button--text {
  padding: 0 5px;
}
 
.el-table__header .el-checkbox__inner {
  border-radius: 2px;
  border-color: #DCDFE6;
}
</style>